@import "reset.css";
@import "iconfonts.css";

@bg: #f4f4f4;
@white: #fff;
@theme-color: #ff7e00;
@black87: rgba(0,0,0,.87);
@black54: rgba(0,0,0,.54);
@black26: rgba(0,0,0,.26);
@border-color: #d2d2d2;
//flex兼容性写法
.flex{
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
}
.flex-v{
  -webkit-box-orient:vertical;
  -webkit-flex-direction:column;
  -ms-flex-direction:column;
  flex-direction:column;
}
.flex (@num) {
  -webkit-box-flex:@num;
  -webkit-flex:@num;
  -ms-flex:@num;
  flex:@num;
}
.flex-align (@al) {
  -webkit-box-align:@al;
  -webkit-align-items:@al;
  -ms-flex-align:@al;
  align-items:@al;
}
.flex-just (@fl) {
  -webkit-box-pack:@fl;
  -webkit-justify-content:@fl;
  -ms-flex-pack:@fl;
  justify-content:@fl;
}

.border{
  border: 1px solid @border-color;
}

.u(@length: 2rem) {
  height: @length;
  line-height: @length;
}

.q(@length: 2rem) {
  height: @length;
  width: @length;
  line-height: @length;
  text-align: center;
}
article{
  position: relative;
  height: 100%;
  width: 100%;
  .flex;
  .flex-v;
  overflow: hidden;
  background-color: @bg;
  .nav{
    position: relative;
    height: 44px;
    width: 100%;
    padding: 0 1rem;
    background-color: @white;
    &.border-bottom {
      border-bottom: 1px solid @border-color;
    }
    .flex;
    .flex-just(center);
    .flex-align(center);
    .left-btn,.right-btn{
        position: absolute;
        .flex;
        .flex-align(center);
        left: 0;
        top:0;
        height: 100%;
        font-size: 15px;
         .icon{
           font-size: 1.25rem;
           height: 100%;
           line-height: 44px;
           padding: 0 0.5rem;
         }
      .icon-search{
        font-size: 1.1rem !important;
      }
      .btn {
        height: 100%;
        line-height: 44px;
        padding: 0 1rem;
        &:active {
          opacity: .8;
        }
      }
    }
    h1{
      font-size: 18px;
    }
    .right-btn{
      left: auto;
      right: 0 !important;
      color: @theme-color;
    }
    .search{
      display: none;
      height: 2rem;
      border: none;
      transition: 0.2s;
      margin: 0 1rem;
    }
  }
  .main{
    position: relative;
    width: 100%;
    .flex(1);
    .flex;
    .flex-v;
    overflow-yx: hidden;
    overflow-: auto;
    &>header{
      position: relative;

      .tabs{
        .u(2.5rem);
        min-height: 2.5rem;
        .flex;
        .flex-align (center);
        .flex-just(space-between);
        color: #9d9d9d;
        background-color: @white;
        padding: 0 1rem;
        li.active{
          position: relative;
          color:@theme-color;
        }
        li.active:after{
          content: '';
          position: absolute;
          width: 100%;
          height: 2px;
          left: 0;
          bottom: 0;
          background-color: currentcolor;
        }
      }
      .list-filter{
        position: relative;
        color: #9d9d9d;
        ul{
          position: relative;
          padding: 0.5rem 2.5rem 0 1rem;
          height: 2.75rem;
          background-color: @white;
          overflow: hidden;
          transition: 0.2s;
          li {
            float: left;
            height: 28px;
            line-height: 28px;
            min-width: 76px;
            padding: 0 0.5rem;
            text-align: center;
            margin: 0 0.5rem 0.5rem 0;
            border-radius: 0.25rem;
            background-color: #e6e6e6;

            &.active {
              background-color: @theme-color;
              color: @white;
            }
          }
        }
        span{
          position: absolute;
          .q(2.25rem);
          top:0.25rem;
          right: 0.25rem;
          font-size: 1.125rem;
        }
        // 展开
        .show{
          height: auto !important;
        }
      }
      .progress{
        .u(3rem);
        .flex;
        .flex-just(space-between);
        .flex-align(center);
        padding: 0 1rem;
        li{
          position: relative;
          height: 100%;
          .flex;
          .flex(1);
          .flex-just(center);
          .flex-align(center);
          &:after{
            content: '';
            position: absolute;
            width: 100%;
            height: 2px;
            top:50%;
            left: -50%;
            margin-top: -1px;
            background-color: @border-color;
            transform: scaleY(0.5);

          }
          span{
            display: block;
            .q(0.375rem);
            .border;
            border-radius: 50%;
            background-color: @bg;
            z-index: 10;
          }
          &:nth-of-type(1),
          &:nth-of-type(5),
          &:nth-of-type(10),
          &:nth-of-type(17),
          &:nth-of-type(25)
          {
            span{
              position: relative;
              display: block;
              .q(0.75rem);
              .border;
              border-radius: 50%;
              background-color: @bg;
              z-index: 10;
              &:before{
                content: '';
                position: absolute;
                display: block;
                .q(0.25rem);
                left: 2px;
                top: 2px;
                .border;
                border-radius: 50%;
                background-color:@bg;
                .border;
                z-index: 10;
              }
            }
            &.active:before,&.active:after,&.active span:before {
              background-color: @theme-color;
            }
            &.active span{
              border-color: @theme-color !important;
              background-color: @bg ;
            }
            &.active span:before{
              border-color: @theme-color;
            }

          }
          &:first-child:before{
            content: '';
            position: absolute;
            width: 200%;
            height: 2px;
            top:50%;
            right: 50%;
            margin-top: -1px;
            background-color: @border-color;
            transform: scaleY(0.5);
          }
          &:last-child:before{
            content: '';
            position: absolute;
            width: 200%;
            height: 2px;
            top:50%;
            left: 50%;
            margin-top: -1px;
            background-color: @border-color;
            transform: scaleY(0.5);
          }
          &.active span,&.active:after{
            border-color: @theme-color;
            background-color: @theme-color;
          }
          &.active:before{
            background-color: @theme-color;
          }
        }

      }
    }
    .main-body{
      .flex(1);
      overflow-x: hidden;
      overflow-y: auto;
      /*评分内容详情*/
      .appraise-detial{
        position: relative;

        .title{
          height: 2rem;
          line-height: 1.5rem;
          color: @theme-color;
          font-size: 18px;
          padding: 0 1rem;
        }
        .detial{
          li{
            padding: 0.25rem 1rem;
          }
        }
      }

    }

  }
  footer{
    position: relative;
    background-color: @white;
    padding: 0 1rem;
    .rating-description{
      position: relative;
      color: #9e9e9e;
      p{
        .u;
        span{
          padding-left: 0.5rem;
        }
      }
      ul{
        position: relative;
        .flex;
        .flex-align(center);
        .flex-just(space-around);
        .u(3.5rem);
        border-bottom: 1px solid @border-color;
        li{
          .q(3rem);
          .flex;
          .flex-align(center);
          .flex-just(center);
          span{
            font-size: 2rem;
          }
          .active:before{
            content: '\e90d' ;
            color: @theme-color ;
          }
        }

      }

    }
    .con-btn{
      position: relative;
      .flex;
      .flex-just(space-between);
      .flex-align(center);

      .u(3rem);
      .next{
        color: @theme-color;
      }
    }
  }
  .side-nav{
    display: none;
    position: absolute;
    right: 0;
    top:44px;
    bottom: 0;
    width: 180px;
    padding: 0.5rem 1rem;
    background-color: @white;
    color: #9d9d9d;
    box-shadow: -2px -2px 32px 2px rgba(0,0,0,0.1) ;
    z-index: 100;
    overflow-x: hidden;
    overflow-y: auto;
    &>li{
      margin-top: 0.5rem;
      &:first-child{
        margin-top: 0;
      }
      p{
        position: relative;
        .u;
        &:after{
          content: '';
          position: absolute;
          left: 0;
          bottom: 0;
          width: 1.85rem;
          height: 0.125rem;
          background-color: #787878;
        }

      }
      &.active{
        p{
          color:@theme-color;
        }
        p:after{
          background-color: @theme-color;
        }
      }
      li{
        .u;
        .flex;
        .flex-just(space-between);
        .flex-align(center);
        &.active span:first-child{
          color: #000;
        }
        &.active span:last-child{
          color: @theme-color;
        }
      }

    }

  }
  /*蒙板*/
}


//个人主页individual.html
//总评分列表
.total-score-list {
  .flex;
  min-height: 5rem;
  padding: 1rem 0;
  margin-bottom: 1rem;
  background-color: @white;
  li {
    .flex;
    .flex-v;
    .flex(1);
    text-align: center;
    & > *:first-child {
      line-height: 1rem;
      color: @black54;
      font-size: .75rem;
      margin-bottom: 1rem;
    }
    & > *:last-child {
      line-height: 1rem;
      font-size: 18px;
    }
  }
}
//图表容器
.chart-container {
  min-height: 11rem;
  margin-bottom: 1rem;
  background-color: @white;
}
//加分区
.add-score-container {
  padding: 0 1rem;
  margin-bottom: 1rem;
  h2 {
    margin-bottom: .25rem;
    font-size: .75rem;
    font-weight: normal;
  }
  //分数编辑器
  .score-editor {
    .flex;
    margin-bottom: 1rem;
    input {
      .u(1.5rem);
      width: 2.5rem;
      padding: 0 .5rem;
      .border;
      border-radius: 3px;
    }
    .icon {
      .q(1.5rem);
      margin-left: .5rem;
      font-size: 1.5rem;
      color: @theme-color;
      &:active {
        opacity: .8;
      }
    }
  }
  //加分项
  .score-item-list {
    .flex;
    flex-wrap: wrap;
    margin-bottom: .5rem;
    li {
      .u(1.5rem);
      width: 3.5rem;
      margin-right: .5rem;
      margin-bottom: .5rem;
      border-radius: 3px;
      text-align: center;
      font-size: .75rem;
      background-color: #e6e6e6;
      transition: all .2s;
      &.active, &:active {
        background-color: @theme-color;
        color: @white;
      }
    }
  }
  //加分缘由
  textarea {
    width: 100%;
    min-height: 8.5rem;
    padding: .5rem;
    border: none;
    border-radius: 3px;
    background-color: #fff;
    font-size: .75rem;
  }
  .btn-save {
    float: right;
    .u;
    border: none;
    background-color: transparent;
    font-size: .875rem;
    color: @theme-color;
    &:active {
      opacity: .8;
    }
  }
}
//评分详情
.item-score-list {
  margin-bottom: 1rem;
  background-color: @white;
  h2 {
    position: relative;
    padding: 0.5rem .875rem;
    font-weight: normal;
    font-size: .875rem;
    color: @theme-color;
    &:after{
      content: '';
      position: absolute;
      left: 0;
      top: 0.5rem;
      bottom: 0.5rem;
      width: 0.125rem;
      background-color: @theme-color;
    }
  }
  ul {
    .flex;
    flex-wrap: wrap;
    li {
      position: relative;
      .flex;
      .flex-v;
      width: 25%;
      margin-bottom: 1rem;
      text-align: center;
      &:before {
        content: '';
        position: absolute;
        top: 50%;
        margin-top: -.5rem;
        left: 0;
        box-sizing: border-box;
        height: 1rem;
        border-left: 1px solid @border-color;
      }
      &:nth-of-type(1):before, &:nth-of-type(5n):before {
        border-left-color: transparent;
      }
      & > *:first-child {
        font-size: 1rem;
        margin-bottom: .5rem;
      }
      & > *:last-child {
        font-size: .75rem;
        color: @black54;
      }
    }
  }
}
//员工主页staff.html
.status {
  &.status-before {
    color: @black54;
  }
  &.status-active {
    color: @black87;
  }
  &.status-finished {
    color: @theme-color;
  }
}
//自评
.self {
  .flex;
  .flex-align(center);
  justify-content: space-between;
  height: 3rem;
  padding: 0 1rem;
  margin-bottom: 1rem;
  background-color: @white;
}
//人员列表，带头像
.member-list {
  padding-left: 4.25rem;
  li {
    position: relative;
    .flex;
    .flex-align(center);
    justify-content: space-between;
    height: 3rem;
    width: 100%;
    padding-right: 1rem;
    border-top: 1px solid @border-color;
    &:first-child {
      border-top: none;
    }
  }
  .avatar {
    position: absolute;
    top: 50%;
    left: -3.25rem;
    margin-top: -1.125rem;
    .q(2.25rem);
    border-radius: 50%;
    background-color: #ccc;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
}
//折叠面板
.collapse {
  padding-left: 1rem;
  background-color: @white;
  .title {
    .flex;
    .flex-align(center);
    justify-content: space-between;
    .u(3rem);
    padding-right: 1rem;
    border-bottom: 1px solid @border-color;
    .icon {
      transform: rotate(180deg);
      transition: all .2s;
    }
  }
  &:last-child > .title {
    border-bottom-color: transparent;
  }
  &:last-child.on > .title{
    border-bottom-color: @border-color;
  }
  .content {
    display: none;
  }
  &.on {
    & > .title .icon {
      transform: rotate(270deg);
    }
    & > .content {
      display: block;
    }
  }
}

//人员列表
.group-container {
  margin-bottom: 1rem;
  &.collapse .title {
    border-bottom: none;
  }
  .member-list li:first-child {
    border-top: 1px solid @border-color;
  }
}
.org-structure {
  margin-bottom: 1rem;
}
.mask{
  display: none;
  position: absolute;
  left: 0;
  top:0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgba(0,0,0,0.35);
  z-index: 1000;
}
.dialog{
  display: none;
  position: absolute;
  left: 50%;
  top:50%;
  width: 300px;
  height: 388px;
  transform: translate3d(-50% ,-50% ,0);
  background-image: url(../images/pic.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: 2000;
  .icon{
    position: absolute;
    right: 0;
    top: -2rem;
    font-size: 2rem;
    color: @white;
  }
  h3,.con{
    display: none;
  }
}
.toast{
  display: none;
  background-image: url(../images/pic02.png);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;

  h3{
    display: block;
    text-align: center;
    color: #f2ffd6;
    .u;
    margin-top: 77px;
    letter-spacing: 4px;
    padding-left: 8px;
  }
  .con{
    display: block;
    position: relative;
    width: 100%;
    height: 230px;
    color: @white;
    .all{
      text-align: center;
       .u;
      margin-top: 1rem;
    }
    .num{
      text-align: center;
      font-size: 2rem;
      .u(3rem);
    }
    .list{
      padding:0.25rem 1rem  ;
      .flex;
      .flex-just(space-around);
      flex-wrap: wrap;
      li{
        word-break: keep-all;
        .u ;
      }
    }
    .btn{
      text-align: center;
      .u ;
      width: 70%;
      background: @white;
      border-radius:2rem;
      margin: 1rem  auto;
      color:#ff4d2e;
    }

  }
}